<script setup lang="ts" name="indexTitle">
import useIndexTitle from '@/components/index/hooks/indexTitle'
const { input, title, currUser, titleItems, searchKeyWords, showSelector } = useIndexTitle()
</script>

<template>
  <div id="header-content">
    <router-link id="header-logo" :to="{ name: 'card' }" title="主页">
      <img src="@/assets/logo.svg" alt="筛选" />
      <b>{{ title }}</b>
    </router-link>
    <div id="header-content">
      <div id="header-content-left">
        <router-link to="">
          <img @click="showSelector" src="@/components/icons/title/filter.svg" alt="筛选" />
        </router-link>
        <router-link :to="{ name: 'card' }"
          ><img src="@/components/icons/title/active.svg" alt="推荐" title="推荐" />
        </router-link>
      </div>
      <div id="header-content-search">
        <input
          ref="input"
          type="text"
          @keyup.enter="searchKeyWords(($event.target as HTMLInputElement).value)"
        />
        <img
          @click="
            searchKeyWords(
              (($event.target as HTMLElement).previousElementSibling as HTMLInputElement).value
            )
          "
          class="search"
          src="@/components/icons/title/search.svg"
          alt="搜索"
          title="搜索"
        />
      </div>
      <div id="header-content-right">
        <router-link :to="{ name: 'followig' }"
          ><img class="active" src="@/components//icons//title/bell.svg" alt="动态" title="动态"
        /></router-link>
        <router-link :to="{ name: 'history' }"
          ><img src="@/components/icons/title/history.svg" alt="历史" title="历史记录"
        /></router-link>
        <el-badge :value="titleItems" :max="99" :hidden="titleItems === 0" class="item">
          <router-link :to="{ name: 'msg' }"
            ><img
              class="message"
              src="@/components/icons/title/message.svg"
              alt="消息"
              title="消息"
            />
          </router-link>
        </el-badge>
      </div>
    </div>
    <div id="header-login">
      <ul>
        <li>
          <router-link :to="{ name: 'work' }" target="_blank"
            ><img src="@/components/icons/title/add.svg" alt="" title="工作台"
          /></router-link>
        </li>
        <li>
          <router-link :to="{ name: 'edit' }"
            ><img src="@/components/icons/title/workbench.svg" alt="" title="我的投稿"
          /></router-link>
        </li>
        <li>
          <router-link :to="{ name: 'info', query: { id: currUser.id } }"
            ><img class="account" :src="currUser.img" alt="" title="我的"
          /></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="less">
#header-content {
  height: 48px;
  width: max(1200px, 100%);
  display: flex;
  gap: 6px;

  > #header-logo {
    width: 200px;
    white-space: nowrap;
    > img {
      display: inline-block;
      vertical-align: middle;
      width: 48px;
    }
    > b {
      color: var(--color3);
      vertical-align: middle;
      font-size: 40px;
      line-height: 48px;
      margin: 0 8px;
    }
  }
  > #header-content {
    flex: 1;
    align-self: center;
    min-width: 800px;
    height: 36px;
    display: flex;
    gap: 6px;

    align-items: center;

    justify-content: space-between;
    img {
      width: 28px;
      height: 28px;
      margin: 4px 0;
    }
    a {
      float: left;
      padding: 0 8px;
      border-radius: var(--radius);
    }
    a:hover {
      background-color: var(--color2);
    }
    a:active {
      background-color: var(--color2);
      outline: 2px dashed var(--color2);
      outline-offset: 4px;
    }
    #header-content-left {
      white-space: nowrap;
    }
    #header-content-search {
      white-space: nowrap;
      input {
        color: var(--color-font);
        font-size: 16px;
        vertical-align: middle;
        height: 36px;
        width: 300px;
        padding: 0 10px;
        border: 2px solid var(--color2);
        border-radius: var(--radius) 0 0 var(--radius);
        box-sizing: border-box;
      }
      input:focus {
        outline: none;
      }

      img:active {
        outline: 2px dashed var(--color2);
        outline-offset: 4px;
      }
      img {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        width: 36px;
        height: 36px;
        border: 2px solid var(--color2);
        box-sizing: border-box;
        background-color: var(--color2);
        border-radius: 0 var(--radius) var(--radius) 0;
      }
    }
    #header-content-right {
      white-space: nowrap;
    }
  }
  #header-login {
    width: 200px;
    position: relative;
    margin-left: 18px;
    background-color: var(--color2);
    border-radius: var(--radius);
    ul {
      position: absolute;
      white-space: nowrap;
      top: 50%;
      left: 50%;
      height: 48px;
      translate: -50% -50%;
      li {
        display: inline-block;
        vertical-align: middle;
        margin: 3px 0;
        img {
          width: 36px;
          height: 36px;
          margin: 0 9px;
        }

        .account {
          width: 42px;
          height: 42px;
          border-radius: var(--radius);
        }
      }
    }
  }
}
</style>
